<!DOCTYPE html>
<html>
<head>
<title>订单修改</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/layer/layer/layer.js"></script>    
<style>

</style>
</head>
<body >
<!--startprint-->
<div class="container-fluid text-left" style="max-width: 800px;margin-left: 0;" >

    <input type="hidden" id="id" value="{$order['id']}" />

    <div id="top" class="text text-info" style="height:50px;line-height: 50px;font-weight: bold;font-size: 1.2rem;border-bottom: 1px solid #ccc;">订单修改</div>

    <div class="" style="font-size: 1rem;">
        <div>餐桌号：{$order.table_id_name}</div>
        <div>订单流水：{$order.order_no}</div>
        <div>下单人：{$order.creater_name}</div>
        <div>下单时间：{$order.create_time}</div>
        <div>订单状态：{$order.status_name}</div>
    </div>
    <br/>
    <div class="row">
        <div class="col-2">商品选择:</div>
        <div class="col-6">
        <select class="form-control" id ="new_goods">
            {foreach $goods as $g}
                <option value="{$g['id']}" price="{$g['price']}">{$g['name']}</option>
            {/foreach}
        </select>
        </div>
        <div class="col-2 text-left">
            <button type="button" id="goods_add" class="btn btn-primary "><span class="bi-plus-lg"></span> </button>
        </div>
    </div>
    <br />
    <table class="table table-sm table-striped" style="width: initial;min-width: 100%;">
        <thead >
            <th>序号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
            <th></th>
        </thead>
        <tbody>
            {foreach $list as $k=>$kv}
            <tr class="goods" gid="{$kv['goods_id']}" gname="{$kv['name']}" price="{$kv['price']}" num="{$kv['num']}" total="{$kv['total']}">
                <td>{$k+1}</td>
                <td style="max-width: 240px;">
                    <div>{$kv['name']}</div> 
                </td>
                <td>{$kv['price']}</td>
                <td>x{$kv['num']}</td>
                <td>{$kv['total']}</td>
                <td>
                    <span class="bi-trash"></span>
                </td>
            </tr>
            {/foreach}
            <tr style="font-weight: bold;">
                <td></td>
                <td></td>
                <td>Total</td>
                <td>{$num}</td>
                <td>{$sum}</td>
                <td></td>
            </tr>
        </tbody>    
    </table>
<div class="text-center">
    <button class="btn btn-info" type="button" id="refresh">
        <a href="/index.php/order/order_edit/id/{$order['id']}" style="color:white;"><span class="bi-arrow-clockwise"></span> 重新载入</a>
    </button>    
    <button class="btn btn-primary" type="button" id="order_save">
        <span class="bi-check"></span> 保存修改
    </button>
</div>

</div>
<!--endprint-->


<div style="height:50px;text-align: center;color:#999"></div>
</body>

<script type="text/javascript">
    var gtemp=[];
    var change=0;
  $(document).ready(function(){
    //初始化商品数组
    $(".goods").each(function(el){
        el=$(this);
        gtemp.push({
            'id':   el.attr('gid'),
            'name': el.attr('gname'),
            'num':  el.attr('num')*1,
            'price':el.attr('price')*1,
            'total':el.attr('total')*1}
            );
        
    })
    //console.log(gtemp);
    //新增产品
    $("#goods_add").on('click',function(){
        var gid = $("#new_goods").val();
        var gname = $("#new_goods").find("option:selected").text();
        var price = $("#new_goods").find("option:selected").attr('price');

        //重复的产品+1，total累加
        var exist=0;
        for(var i=0;i<gtemp.length;i++){
            if(gid==gtemp[i].id){
                gtemp[i].num+=1;
                gtemp[i].total+=price*1;
                exist=1;
                break;
            }
        }
        //新产品+1
        if(exist==0){
            var new_goods = {'id':gid,'name':gname,'num':1,'price':price*1,'total':price*1};
            gtemp.push(new_goods);
        }
        change=1;
        //console.log(gtemp);
        refreshGoods();
    })

    //删商品
    $('table').on('click','.bi-trash',function(e){
        var et = e.target;
        var gg = $(et).parents('tr');
        var gname = gg.attr('gname');

        for(var i=0;i<gtemp.length;i++){
            if(gtemp[i].name==gname){
                gtemp.splice(i,1);
                break;
            }
        }
        change=1;
        refreshGoods();

    })    

    //刷新购物车显示
    function refreshGoods(){
        $("table").html('<tr style="border-bottom:1px solid #ccc;"><td>No.</td><td>Item</td><td>Count</td><td>Price</td><td>Total</td><td></td></tr>');
        console.log(gtemp);
        var total =0;
        var count=0;
        var el='';
        for(var i=0;i<gtemp.length;i++){
            total+=gtemp[i].total*1;
            count+=gtemp[i].num;
                el+= "<tr gname='"+gtemp[i].name+"'>";
                el+= "<td>"+(i*1+1)+"</td>";
                el+= "<td>"+gtemp[i].name+ "</td>";
                el+= "<td>x"+gtemp[i].num+ "</td>";
                el+= "<td>"+(gtemp[i].price*1)+ "</td>";
                el+= "<td>"+ (gtemp[i].total*1).toFixed(2)+"</td>";
                el+= "<td><span class='bi-trash'></span></td>";
                el+= "</tr>";
            //$("#goods_list").append(el);
        }
        //$("#cart_num").html(count);
        if(count==0){
            $("table").html('');
        }else{
            $("table").append(el+'<tr style="border-top:1px solid #ccc;"><td></td><td>Total:</td><td>'+count+'</td><td></td><td>'+total.toFixed(2)+'</td><td></td></tr><br/>');
        }
        
    }  

        //订单提交
        $("#order_save").on('click',function(e){
            if(change==0) {
                layer.msg('别瞎点啊！');
                e.preventDefault(); //阻止冒泡
                return false;
            }
            if(!gtemp.length) {
                layer.msg('订单没有任何东西了！');
                e.preventDefault(); //阻止冒泡
                return;
            }

            //询问框
            //$("table").show();
            layer.confirm('是否确定保存订单?', {
              btn: ['确定保存','再看一下'] //按钮
            }, function(){
                var order ={id:$("#id").val(),data:gtemp};
                $.ajax({
                    url:'/index.php/order/order_edit',
                    type:'post',
                    data:order,
                    success:function(res){
                        if(res.code){
                            layer.msg('订单保存成功!');
                            //gtemp=[];
                        }else{
                            layer.msg(res.msg);
                        }
                            
                    },
                    fail:function(res){
                        layer.msg(res.code+'Order submit failed!');
                    }
                });

                e.preventDefault(); 
                
            }, function(){
                layer.msg('操作取消！');
                return false;
                e.preventDefault(); //阻止冒泡
            });         

        })          

  })

    function printpage(){
      let oldStr = window.document.body.innerHTML; // 获取body的内容
      let start = "<!--startprint-->"; // 开始打印标识, 17个字符
      let end = "<!--endprint-->"; // 结束打印标识
      let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
      newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
      window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
      window.print(); // 调用浏览器的打印功能打印指定区域
      window.document.body.innerHTML = oldStr; // body替换为原来的内容
    }
</script>


</body>
</html>
